<template>
	<view class="store_login">
		<view class="status_bar_h" :style="{
				height: `${statusBarHeight}px`,
				backgroundColor: '#20BF6C',
			}"></view>
		<view class="main">
			<view class="title"> 请输入设备 ID </view>
			<view class="form">
				<view class="user_name">
					<up-input v-model="form.user_name" type="text" color="#39B19D" shape="circle" :customStyle="{
							border: '2rpx solid #39B19D!important',
						}" placeholder="请输入账号">
					</up-input>
				</view>
				<!-- <view class="user_pass">
					<up-input
						v-model="form.user_pass"
						type="text"
						color="#39B19D"
						shape="circle"
						:customStyle="{
							border: '2rpx solid #39B19D!important',
						}"
						placeholder="请输入密码">
					</up-input>
				</view> -->
			</view>
			<div class="btn_box">
				<view class="btn" @click="reset">重置</view>
				<view class="btn" @click="confirm">确认</view>
			</div>
			<view class="close" v-if="showClose">
				<image @click="closeFn" src="/static/images/menu/guanbi.png" mode="widthFix"></image>
			</view>
		</view>

	</view>
</template>

<script>
	import useStore from '@/store/index.js';
	import baseURL from '@/utils/baseURL.js';
	export default {
		components: {},
		props: {
			showClose: Boolean
		},
		data() {
			return {
				baseURL,
				form: {
					user_name: '',
					user_pass: '',
				},
				timer: null,
			};
		},
		mounted() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.bthHeight = uni.getSystemInfoSync().screenHeight - (1000 - 40) / 2;
			this.countdown();

			this.form.user_name = '658d320cb47c2-658d320cb47c4'
		},
		methods: {
			countdown() {
				this.timer = setTimeout(() => {
					// uni.navigateTo({
					// 	url: '/pages/index/index',
					// });
				}, 1000 * 60 * 10);
			},
			clearCountdown() {
				clearTimeout(this.timer);
				this.countdown();
			},
			checkForm() {
				const {
					user_name
				} = this.form;
				return user_name ? true : false;
			},
			confirm() {
				if (this.checkForm()) {
					const {
						user_name
					} = this.form;
					// uni.showToast({
					// 	title: '点击按钮',
					// 	duration: 1000,
					// });
					uni.request({
						url: baseURL + '/api/index/getEquipmentStore',
						data: {
							equipmentID: uni.$u.trim(user_name, 'all')
						},
						header: {
							Accept: 'application/json',
							'Content-Type': 'application/json',
							'X-Requested-With': 'XMLHttpRequest',
						},
						method: 'POST',
						sslVerify: false,
						success: res => {
							const resOptions = res;
							uni.request({
								url: baseURL + '/api/index/getstoreDetails',
								data: {
									store_id: res.data.data.store_id
								},
								header: {
									Accept: 'application/json',
									'Content-Type': 'application/json',
									'X-Requested-With': 'XMLHttpRequest',
								},
								method: 'GET',
								sslVerify: false,
								success: res => {
									// this.view.store = res.data.data.name;
									// console.log('equipmentOptions---=====');
									// console.log('res.data.data', res);

									if (res.data.code == 0) {
										uni.showToast({
											title: '設備ID有誤',
											icon: 'error'
										})
										return
									}

									const _src = res.data?.data.imagejh ?
										res.data?.data.imagejh.split(',') : [];
									this.src = _src.map(item => baseURL + item);
									// console.log('this.src', this.src);
									uni.setStorageSync(
										'equipmentOptions',
										JSON.stringify({
											...resOptions,
											...res.data.data,
											equipmentID: uni.$u.trim(user_name, 'all'),
										})
									);
									// uni.showToast({
									// 	title: '关闭',
									// 	duration: 1000,
									// });
									this.$emit('handClose');
								},
								fail: error => {},
							});
						},
						fail: error => {},
					});
				} else {
					uni.showToast({
						title: '请输入账号',
						icon: 'none',
						duration: 1000,
					});
				}
			},
			reset() {
				this.form.user_name = '';
			},
			close() {
				this.isCouponShow = false;
			},
			jump(data) {
				let url = '';
				switch (data) {
					case 'register':
						url = '/pages/register/register';
						break;
					case 'codeLogin':
						url = '/pages/menu/menu';
						break;
					case 'scanCode':
						url = '/pages/scanCode/scanCode';
						break;
					case 'pay':
						url = '/pages/pay/ticket';
						break;
					case 'logout':
						url = '/pages/index/index';
						break;
					default:
				}
				uni.navigateTo({
					url
				});
			},
			logout() {
				uni.removeStorageSync('userOptions');
				this.jump('logout');
			},
			closeFn() {
				this.$emit('closeFn')
			}
		},
	};
</script>

<style lang="scss" scoped>
	.store_login {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		// position: relative;

		.main {
			padding: 30rpx 60rpx;
			border: 2rpx solid $uni-color-green;
			border-radius: 10rpx;
			color: $uni-color-green;
			background-color: $uni-color-white;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;

			.title {
				width: 400rpx;
				height: 150rpx;
				text-align: center;
				line-height: 150rpx;
			}

			.form {
				position: relative;
				padding-bottom: 120rpx;

				.input {
					border: 2rpx solid $uni-color-green;
				}

				.input:focus {
					border: 2rpx solid $uni-color-green;
				}

				.input:focus {
					border: 2rpx solid $uni-color-green;
				}

				.user_name {
					margin-bottom: 20rpx;
				}

				.checkout_btn {
					position: absolute;
					right: 20rpx;
					bottom: 60rpx;
					font-size: 24rpx;
				}
			}

			.btn_box {
				width: 400rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-between;

				.btn {
					height: 30rpx;
					padding: 20rpx;
					line-height: 1;
					border-radius: 10rpx;
					color: $uni-color-white;
					background-color: $uni-color-green;
				}
			}
		}

		.close {
			position: absolute;
			bottom: -120rpx;
			display: flex;
			justify-content: center;
			width: calc(100% - 120rpx);

			image {
				width: 100rpx;
			}
		}
	}
</style>